<script setup lang="ts">
// SCSS示例页面
</script>

<template>
  <view class="container p-30rpx">
    <view class="section mb-40rpx">
      <view class="section-title text-32rpx font-bold mb-20rpx">颜色变量</view>

      <!-- 品牌颜色 -->
      <view class="mb-30rpx">
        <view class="sub-title mb-10rpx">品牌颜色</view>
        <view class="color-grid">
          <view class="color-item color-primary">$color-primary-default</view>
          <view class="color-item color-success">$color-success</view>
          <view class="color-item color-warning">$color-warning</view>
          <view class="color-item color-error">$color-error</view>
        </view>
      </view>

      <!-- 文本颜色 -->
      <view class="mb-30rpx">
        <view class="sub-title mb-10rpx">文本颜色</view>
        <view class="color-grid">
          <view class="color-item color-text-primary">$color-text-primary</view>
          <view class="color-item color-text-default">$color-text-default</view>
          <view class="color-item color-text-secondary">$color-text-secondary</view>
          <view class="color-item color-text-placeholder">$color-text-placeholder</view>
        </view>
      </view>

      <!-- 背景颜色 -->
      <view class="mb-30rpx">
        <view class="sub-title mb-10rpx">背景颜色</view>
        <view class="color-grid">
          <view class="color-item color-bg-page">$color-bg-page</view>
          <view class="color-item color-bg-default">$color-bg-default</view>
          <view class="color-item color-bg-mask">$color-bg-mask</view>
        </view>
      </view>
    </view>

    <view class="section mb-40rpx">
      <view class="section-title text-32rpx font-bold mb-20rpx">字体与排版</view>
      <view class="typography-demo">
        <view class="font-demo font-size-xs">字体大小 XS ($font-size-xs)</view>
        <view class="font-demo font-size-sm">字体大小 SM ($font-size-sm)</view>
        <view class="font-demo font-size-md">字体大小 MD ($font-size-md)</view>
        <view class="font-demo font-size-lg">字体大小 LG ($font-size-lg)</view>
        <view class="font-demo font-size-xl">字体大小 XL ($font-size-xl)</view>
      </view>
    </view>

    <view class="section mb-40rpx">
      <view class="section-title text-32rpx font-bold mb-20rpx">间距变量</view>
      <view class="spacing-demo">
        <view class="spacing-item spacing-xs">$spacing-xs</view>
        <view class="spacing-item spacing-sm">$spacing-sm</view>
        <view class="spacing-item spacing-md">$spacing-md</view>
        <view class="spacing-item spacing-lg">$spacing-lg</view>
        <view class="spacing-item spacing-xl">$spacing-xl</view>
      </view>
    </view>

    <view class="section mb-40rpx">
      <view class="section-title text-32rpx font-bold mb-20rpx">动画效果</view>
      <view class="animation-demo">
        <view class="btn-animate hover-scale">悬停缩放效果</view>
        <view class="btn-animate fade-in">淡入效果</view>
        <view class="btn-animate slide-in">滑入效果</view>
      </view>
    </view>

    <view class="section mb-40rpx">
      <view class="section-title text-32rpx font-bold mb-20rpx">自定义样式</view>
      <view class="custom-demo">
        <view class="multi-ellipsis">
          这是一个多行省略的文本示例，当文本内容超过指定行数时会自动截断并显示省略号。这个功能在展示文章摘要或产品描述时非常有用，可以保持界面整洁美观。
        </view>
        <view class="gradient-btn">渐变按钮</view>
        <view class="skeleton-box">骨架加载</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
// 颜色展示组件样式
.color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.color-item {
  width: 320rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #fff;

  // 文字在深色背景上保持可读性
  &.color-text-placeholder,
  &.color-bg-page,
  &.color-bg-default {
    color: #333;
  }
}

.color-primary {
  background-color: $color-primary-default;
}

.color-success {
  background-color: $color-success;
}

.color-warning {
  background-color: $color-warning;
}

.color-error {
  background-color: $color-error;
}

.color-text-primary {
  background-color: $color-text-primary;
}

.color-text-default {
  background-color: $color-text-default;
}

.color-text-secondary {
  background-color: $color-text-secondary;
}

.color-text-placeholder {
  background-color: $color-text-placeholder;
}

.color-bg-page {
  background-color: $color-bg-page;
}

.color-bg-default {
  background-color: $color-bg-default;
}

.color-bg-mask {
  background-color: $color-bg-mask;
}

// 字体展示样式
.typography-demo {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.font-demo {
  padding: 15rpx;
  background-color: $color-bg-default;
  border-radius: 8rpx;
}

.font-size-xs {
  font-size: $font-size-xs;
}

.font-size-sm {
  font-size: $font-size-sm;
}

.font-size-md {
  font-size: $font-size-md;
}

.font-size-lg {
  font-size: $font-size-lg;
}

.font-size-xl {
  font-size: $font-size-xl;
}

// 间距展示样式
.spacing-demo {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.spacing-item {
  height: 60rpx;
  background-color: $color-primary-default;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
}

.spacing-xs {
  padding: 0 $spacing-xs;
}

.spacing-sm {
  padding: 0 $spacing-sm;
}

.spacing-md {
  padding: 0 $spacing-md;
}

.spacing-lg {
  padding: 0 $spacing-lg;
}

.spacing-xl {
  padding: 0 $spacing-xl;
}

// 动画效果样式
.animation-demo {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn-animate {
  padding: 20rpx;
  background-color: $color-primary-default;
  color: #fff;
  border-radius: 8rpx;
  text-align: center;
  cursor: pointer;
}

.hover-scale {
  transition: transform $duration-base $ease-default;
  &:hover {
    transform: scale(1.05);
  }
}

.fade-in {
  animation: fadeIn $duration-base $ease-out;
}

.slide-in {
  animation: slideIn $duration-base $ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-20rpx);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

// 自定义样式示例
.custom-demo {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.multi-ellipsis {
  background-color: $color-bg-default;
  padding: 20rpx;
  border-radius: 8rpx;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.gradient-btn {
  height: 80rpx;
  background: $color-gradient-primary;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  font-weight: bold;
}

.skeleton-box {
  height: 200rpx;
  background-color: $color-bg-default;
  border-radius: 8rpx;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer $duration-slow linear infinite;
  }
}

@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

// 通用样式
.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  color: $color-text-primary;
  position: relative;
  padding-left: 24rpx;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 32rpx;
    background-color: $color-primary-default;
    border-radius: 4rpx;
  }
}

.sub-title {
  font-size: 28rpx;
  color: $color-text-secondary;
}
</style>
